<template>
	<div class="sidebar">
		<el-menu
			class="sidebar-el-menu"
			router
			:default-active="$route.path"
			background-color="#324157"
			text-color="#bfcbd9"
			active-text-color="#20a0ff"
		>
			<template v-for="item in menuData">
				<template v-if="item.children">
					<el-sub-menu :index="item.index" :key="item.index">
						<template #title>
							<el-icon>
								<component :is="item.icon"></component>
							</el-icon>
							<span>{{ item.title }}</span>
						</template>
						<template v-for="subItem in item.children" :key="subItem.index">
							<el-menu-item :index="subItem.index">
								{{ subItem.title }}
							</el-menu-item>
						</template>
					</el-sub-menu>
				</template>
				<template v-else>
					<el-menu-item :index="item.index" :key="item.index">
						<el-icon>
							<component :is="item.icon"></component>
						</el-icon>
						<template #title>{{ item.title }}</template>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script setup>
import { menuData } from '../model'
</script>

<style scoped>
.sidebar {
	height: 100vh;
}

.sidebar::-webkit-scrollbar {
	width: 0;
}

.sidebar-el-menu {
	min-height: 100%;
}
</style>
